---
title: Overlay
description: An Overlay is an element that normally covers the entire screen and prevents content behind it from being interactable.
docType: Demo
docGroup: Components
group: Feedback
alias: [Backdrop]
components: [Overlay]
---

# Overlay

An `Overlay` is an element that normally covers the entire screen and prevents
content behind it from being interactable.

## Simple Overlay

An `Overlay` dynamically renders itself based on a `visible` prop with a simple
opacity transition. An `Overlay` should normally have an `onClick` handler that
hide the overlay.

```demo source="./SimpleOverlayExample.tsx"

```

### Invisible Overlay

If the `Overlay` should be rendered with another element and act as a way to
"close on outside click" without clicking other elements, enable the `noOpacity`
prop.

```demo source="./InvisibleOverlayExample.tsx"

```

## Overlay with Content

The `Overlay` can also render `children` if and supports the box `align-items`
and `justify-content`.

```demo source="./OverlayWithContentExample.tsx"

```
